<template>
    <f7-page class="common-page has-bottom-btns">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>作业前准备</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>
        <div class="common-page-content">
            <template v-if="query.data.length > 0">
                <div v-for="item in query.data" :key="item.jobId" class="work-item" @click="onDetail(item)">
                    <p class="title">
                        <span class="title-left">{{
                item.jobStatus == "submit"
                    ? formatDate(item.submitTime)
                    : formatDate(item.createTime)
            }}</span>
                        <span :class="classNameByStatus(item.jobStatus)">{{ item.jobStatus | jobStatus }}</span>
                    </p>
                    <div class="operator">
                        <img src="../../../../../../assets/img/qzjx/mobile/icon_user.png" alt="" />
                        <div>
                            <p>
                                操作人员：{{
                (item.mobileJobPeopleList &&
                    item.mobileJobPeopleList
                        .map((v) => v.personName)
                        .join("、")) || "--"
            }}
                            </p>
                            <div class="pic-container">
                                <qm-file-upload ref="beforePic" :galleryOptions="{ multiple: true, maximum: 9 }"
                                    :disabled="true" :params="{
                type: 'attach',
                dataKey: item.jobId,
                bizType: 'AQJY',
            }" uploadId="beforePic">
                                </qm-file-upload>
                                <qm-file-upload ref="before1Pic" :galleryOptions="{ multiple: true, maximum: 9 }"
                                    :disabled="true" :params="{
                type: 'attach',
                dataKey: item.jobId,
                bizType: 'JSJD',
            }" uploadId="before1Pic">
                                </qm-file-upload>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <v-empty v-else description="暂无数据" />
        </div>
        <f7-toolbar position="bottom" no-shadow class="fff"
            v-if="query.data.filter((v) => v.jobStatus == 'submit').length > 0 && canEdit">
            <f7-button fill class="submit-btn" @click="onUpdate()">变更登记</f7-button>
        </f7-toolbar>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
export default class instance extends controller {
    onInit() {
        this.context.engineeId = this.$f7route.query.engineeId;
        this.context.engineeCode = this.$f7route.query.engineeCode;
        this.context.status = this.$f7route.query.status;
    }
    onBeforeInit() {
        this.urls = {
            query: "/app/equipment/eqmMobileJob/queryJobList",
        };
    }
    onBeforeQuery(type, conditions, params) {
        if (type == "list") {
            params.query.registerId = this.$f7route.query.registerId;
            params.length = 9999;
        }
    }
    mixin() {
        return {
            data() {
                return {
                    engineeId: '',
                    engineeCode: '',
                    status: null,// 作业前准备节点的状态
                };
            },
            filters: {
                jobStatus(v) {
                    let jobStatusName = "";
                    switch (v) {
                        case "draft":
                            jobStatusName = "草稿";
                            break;
                        case "submit":
                            jobStatusName = "已完成";
                            break;
                        case "stop":
                            jobStatusName = "停用";
                            break;
                        default:
                            jobStatusName = "";
                            break;
                    }
                    return jobStatusName;
                },
            },
            computed: {
                canEdit() {// 施工单位 且未完成
                    return Number(window.localStorage.getItem('mobileEquip-isConOrg')) && this.status != 2
                }
            },
            methods: {
                classNameByStatus(v) {
                    let className = "";
                    switch (v) {
                        case "draft":
                            className = "orange";
                            break;
                        case "submit":
                            className = "blue";
                            break;
                        case "stop":
                            className = "gray";
                            break;
                        default:
                            className = "orange";
                            break;
                    }
                    return className;
                },
                formatDate(date) {
                    return this.$formatter.formatDate(new Date(date), "yyyy-MM-dd");
                },
                // 变更登记
                onUpdate() {
                    let latest = this.query.data.filter(
                        (v) => v.jobStatus == "submit"
                    )[0];
                    let params = [
                        `jobId=${latest.jobId}`,
                        `registerId=${latest.registerId}`,
                        `engineeId=${this.engineeId}`,
                        `engineeCode=${this.engineeCode}`,
                        `pageAction=edit`,
                        `recreate=true`,
                    ];
                    this.$f7.view.current.router.navigate(
                        `/business/qzjx/mobileEquipment/equip/beforeWork/create?${params.join(
                            "&"
                        )}`
                    );
                },
                // 详情
                onDetail(item) {
                    let params = [
                        `jobId=${item.jobId}`,
                        `registerId=${item.registerId}`,
                        `engineeCode=${this.engineeCode}`,
                        `engineeId=${this.engineeId}`,
                    ];
                    if (item.jobStatus == "draft" && this.status != 2) {// 草稿状态 且作业前准备 该节点未完成 则可以进行编辑
                        params.push("pageAction=edit");
                    } else {
                        params.push("pageAction=view");
                    }
                    this.$f7.view.current.router.navigate(
                        `/business/qzjx/mobileEquipment/equip/beforeWork/create?${params.join(
                            "&"
                        )}`
                    );
                },
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../../assets/css/commonPage.less");

.work-item {
    background: #fff;
    margin-bottom: 10px;

    .pic-container {
        display: flex;
        flex-wrap: wrap;

        .list {
            margin: 5px 0;
        }
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 43px;
        margin: 0;
        padding: 0 16px;
        font-size: 14px;
        color: #333333;
        border-bottom: 1px solid #e9ecf0;

        .title-left {
            position: relative;
            padding-left: 10px;

            &::before {
                position: absolute;
                left: 0;
                content: "";
                display: block;
                width: 3.5px;
                height: 11px;
                background: #3385ff;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        .blue {
            color: #3385ff;
        }

        .orange {
            color: #ff9f24;
        }

        .gray {
            color: #8995ac;
        }
    }

    .operator {
        padding: 16px 16px 0;
        font-size: 14px;
        color: #61677a;
        display: flex;

        p {
            margin: 0;
        }

        img {
            width: 25px;
            height: 21px;
            margin-right: 10px;
        }
    }

    .pic_upload {
        padding: 0;
    }
}
</style>
